<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: gaoluo
 * @Date: 2021-08-20 12:36:03
 * @LastEditors: gaoluo
 * @LastEditTime: 2021-11-04 14:10:22
 * @FilePath: /nhw/src/views/Login/index.vue
-->
<template>
  <div class="login-container">
    <div class="img-wrap"></div>
    <div class="icon-wrap">
      <img src="~assets/img/logo@2x.png" />
    </div>
    <Form
      @submit="onSubmit"
      :show-error="false"
      validate-trigger="onSubmit"
      validate-first
    >
      <Field
        v-model="username"
        name="username"
        placeholder="请输入用户名"
        maxlength="12"
        :rules="[{ required: true, message: requiredRule }]"
        @blur="getUserOrgList"
      />
      <Field
        v-model="password"
        type="password"
        name="password"
        placeholder="请输入密码"
        maxlength="12"
        :rules="[
          {
            required: true,
            message: requiredRule,
          },
        ]"
      />
      <Field
        :value="scenicZone"
        name="scenicZone"
        right-icon="play"
        readonly
        @click="showPicker"
      />
      <div class="btn-wrap">
        <Button round block type="info" native-type="submit">登录</Button>
      </div>
    </Form>
    <!-- 风景区选择弹窗 -->
    <Popup v-model="show" position="bottom" :style="{ height: '43%' }">
      <Picker
        show-toolbar
        :columns="orgList"
        @confirm="onConfirm"
        @cancel="onCancel"
        item-height="1rem"
        value-key="orgNam"
      >
      </Picker>
    </Popup>
  </div>
</template>

<script>
import { Form, Field, Button, Popup, Picker } from "vant";
import axios from "axios";
import { toLogin, setToken } from "@/utils/token.js";
export default {
  name: "Login",

  components: { Form, Field, Button, Popup, Picker },

  data() {
    return {
      username: "",
      password: "",
      token: false,
      show: false,
      orgList: [],
      orgListIndex: 0,
    };
  },
  computed: {
    //风景区
    scenicZone() {
      return this.orgList[this.orgListIndex]?.orgNam;
    },
  },
  methods: {
    requiredRule(value, rule) {
      if (value === "" || value === undefined) {
        this.$toast("请输入用户名和密码");
      }
    },
    //获取用户权限景区
    getUserOrgList() {
      axios
        .get("/nhw/api/mine/getUserOrgList.ajax", {
          params: {
            userId: this.username,
          },
        })
        .then((res) => {
          const { data } = res;
          if (data.state == 0) {
            this.orgList = data.param.orgList.map((item) => {
              return { orgNo: item.orgNo, orgNam: item.orgNam };
            });
            //保存 store org
            window.localStorage.setItem("orgNo", this.orgList[0].orgNo);
          } else {
            this.orgList = [];
            this.orgListIndex = 0;
            //清除 store org
            window.localStorage.setItem("orgNo", "");
            this.$toast(data.msgInfo);
          }
        });
    },
    onSubmit(values) {
      this.$toast.loading({
        message: "登录中...",
      });
      toLogin(values).then((data) => {
        if (data.state === 0) {
          this.$toast(data.msgInfo);

          const token = {
            access_token: data.value.token,
            expires_in: data.value.token_expires_in,
            token_time: Date.now(),
          };

          //保存token
          setToken(token, data.value.uakey);
          //保存个人信息
          data.value.userInfo.userId = this.username;
          window.localStorage.setItem(
            "userInfo",
            JSON.stringify(data.value.userInfo)
          );
          //跳转页面
          setTimeout(() => {
            this.$router.replace({ name: "Work" });
          }, 0);
        } else {
          this.$toast(data.msgInfo);
        }
      });
    },
    //显示
    showPicker() {
      if (this.orgList.length > 0) {
        this.show = true;
      }
    },
    //确定
    onConfirm(value, index) {
      this.orgListIndex = index;
      //保存 store org
      window.localStorage.setItem("orgNo", value.orgNo);
      this.show = false;
    },
    //取消
    onCancel() {
      this.show = false;
    },
  },
};
</script>

<style lang="less" scoped>
.login-container {
  width: 100%;
  .img-wrap {
    width: 100%;
    height: 447px;
    overflow: hidden;
    border-bottom-left-radius: 50% 100px;
    border-bottom-right-radius: 50% 100px;
    background: url(~assets/img/loginbg.png) no-repeat;
    background-size: 130%;
    background-position-y: -40px;
    background-position-x: -100px;
    transform: scale(1.1) translateY(-44.7px);
  }
  .icon-wrap {
    width: 168px;
    height: 168px;
    background: #ffffff;
    box-shadow: 0px 13px 46px 0px rgba(189, 116, 73, 0.16);
    border-radius: 32px;
    margin: -140px auto 88px;
    font-size: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    img {
      width: 80%;
      object-fit: contain;
      position: absolute;
      z-index: 9;
    }
  }
  .btn-wrap {
    margin: 68px auto 0;

    width: 622px;
    height: 79px;
    font-weight: 400;
    font-size: 30px;
    .van-button {
      background: #3f4a59;
      box-shadow: 0px 17px 40px 0px rgba(63, 74, 89, 0.22);
      border: none;
    }
  }

  .van-field {
    width: 493px;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
    border-bottom: 1px solid #ddd;
    align-items: center;
    &::before {
      content: "";
      width: 40px;
      height: 35px;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;
      margin-right: 40px;
    }
    &:nth-of-type(1) {
      &::before {
        background-image: url(~assets/img/phone@2x.png);
      }
    }
    &:nth-of-type(2) {
      &::before {
        background-image: url(~assets/img/password@2x.png);
      }
    }
    &:nth-of-type(3) {
      &::before {
        background-image: url(~assets/img/tingzi@2x.png);
      }
    }
  }

  .van-cell::after {
    display: none;
  }

  /deep/.van-icon-play {
    transform: rotateZ(90deg);
  }
}
</style>